<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>部门管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" type="text/css" href="/resources/zTree/css/metroStyle/metroStyle.css">
	<link rel="stylesheet" type="text/css" href="/resources/zTree/plugin/css/index.css">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/public.css" media="all" />
	<script type="text/javascript" src="/resources/zTree/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="/resources/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="/resources/zTree/plugin/js/selectTree.js"></script>
</head>
<body class="childrenBody">
	<!-- 查询开始 -->
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  	<legend>查询条件</legend>
	</fieldset>
	<form class="layui-form"  id="searchFrm">
	  <div class="layui-form-item">
	    <div class="layui-inline">
	      <label class="layui-form-label">部门名称</label>
	      <div class="layui-input-inline">
	        <input type="text" name="name"  autocomplete="off" class="layui-input">
	      </div>
	    </div>
	    <div class="layui-inline">
	      <label class="layui-form-label">部门地址</label>
	      <div class="layui-input-inline">
	        <input type="text" name="loc"  autocomplete="off" class="layui-input">
	      </div>
	    </div>
	    <div class="layui-inline">
	      <label class="layui-form-label">部门备注</label>
	      <div class="layui-input-inline">
	        <input type="text" name="remark"  autocomplete="off" class="layui-input">
	      </div>
	    </div>
	  </div>
	  <div class="layui-form-item" style="text-align: center;">
	    <div class="layui-input-block">
	      <button type="button" class="layui-btn" id="doSearch">查询</button>
	      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
	  </div>
	</form>
	<!-- 查询结束 -->
	<!-- 数据表格开始 -->
	<table class="layui-hide" id="deptList" lay-filter="deptList"></table>
	<div id="toolBar" style="display: none;" lay-filter="toolBar">
		<button type="button" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="update">修改</button>
		<button type="button" class="layui-btn  layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
	</div>
	<div id="tableToolBar" style="display: none;" lay-filter="tableToolBar">
		<button type="button" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="add">添加</button>
	</div>
	<!-- 数据表格结束 -->
	
	<!-- 弹出层 -->
	<div style="display: none;" id="addAndUpdateDept">
		<form class="layui-form"  id="dataFrm" lay-filter="dataFrm" style="margin: 10px">
		
		<div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">父级部门</label>
		      <div class="layui-input-inline">
		      
		      <div id="pid" name="pid" class="select-tree layui-form-select">
		      <input type="hidden" name="id">
            	</div>
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">排序码</label>
		      <div class="layui-input-inline">
		      
		        <input type="number" name="ordernum" readonly="readonly" id="ordernum" lay-verify="required" autocomplete="off" class="layui-input">
		      </div>
		    </div>
	  </div>
		
	  	<div class="layui-form-item">
	      <label class="layui-form-label">部门名称</label>
	      <div class="layui-input-block">
	        <input type="text" name="name"  autocomplete="off" class="layui-input">
	      </div>
	     </div>
	      <div class="layui-form-item">
	      <label class="layui-form-label">部门地址</label>
	      <div class="layui-input-block">
	        <input type="text" name="loc"  autocomplete="off" class="layui-input">
	      </div>
	    </div>
	    <div class="layui-form-item">
	      <label class="layui-form-label">部门备注</label>
	      <div class="layui-input-block">
	         <textarea placeholder="请输入内容" name="remark"  class="layui-textarea"></textarea>
	      </div>
	    </div>
	    <div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">是否展开</label>
		      <div class="layui-input-inline">
		        <input type="radio" name="open"  value="1" title="展开" >
      			<input type="radio" name="open"  value="0" title="不展开">
		      </div>
		    </div>
		     <div class="layui-inline">
		      <label class="layui-form-label">是否父节点</label>
		      <div class="layui-input-inline">
		        <input type="radio" name="parent" value="1" title="是" >
      			<input type="radio" name="parent" value="0" title="否">
		      </div>
		    </div>
		     <div class="layui-inline">
		      <label class="layui-form-label">是否可用</label>
		      <div class="layui-input-inline">
		        <input type="radio" name="available" value="1" title="可用">
      			<input type="radio" name="available" value="0" title="不可用">
		      </div>
		    </div>
	  		</div>
		  	<div class="layui-form-item" style="text-align: center;">
			    <div class="layui-input-block">
			      <button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit">保存</button>
			      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			    </div>
		    </div>
		</form>
	
	</div>
	
	<script src="/resources/layui/layui.js" charset="utf-8"></script>
	
	<script type="text/javascript">
	var tableIns;//数据表格实例
		layui.use([ 'element', 'layer', 'jquery', 'form', 'table','laydate' ],
				function() {
					var element = layui.element;
					var layer = layui.layer;
					var $ = layui.jquery;
					var laydate = layui.laydate;
					var form = layui.form;
					var table = layui.table;
					var laydate=layui.laydate;
					 tableIns=table.render({
					    elem: '#deptList'  //指渲染的目标  
					    ,url:'/dept/loadAllDept'//请求地址
					    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
					    ,height:'full-200'//设置高度    
					 	,page:true//开启分页
					 	,title:"用户列表"  //设置导出execl时的标题
					 	,text:"查询无数据" //如果列表里面数据为空时显示的数据
					 	,toolbar:"#tableToolBar"//设置显示工具条并设置表头左边的工具类
					 	,defaultToolbar:['filter','print']  //设置默认工具条的显示和顺序
					    ,cols: [ [
					       {type:'checkbox'}
					      ,{field:'id',  title: 'ID',width:80, sort: true,align:"center"}
					      ,{field:'pid',  title: '父级部门ID',width:120,align:"center"}
					      ,{field:'name',  title: '部门名称',width:120,align:"center"}
					      ,{field:'remark',  title: '部门备注',width:150, align:"center"}
					      ,{field:'loc',  title: '部门地址',width:120,align:"center"}
					      ,{field:'ordernum',  title: '排序码',width:90,align:"center"}
					      ,{field:'open',  title: '是否展开',width:100,align:"center",templet:function(d){
					    	  return d.open==0?"<font color=red>不展开</font>":"<font color=blue>展开</font>";
					      }}
					      ,{field:'parent',  title: '是否父节点',width:120,align:"center",templet:function(d){
					    	  return d.parent==0?"<font color=red>否</font>":"<font color=blue>是</font>";
					      }}
					      ,{field:'available',  title: '是否可用',width:100,align:"center",templet:function(d){
					    	  return d.available==0?"<font color=red>不可用</font>":"<font color=blue>可用</font>";
					      }}
					      ,{width:200, title: '操作', toolbar:"#toolBar",align:"center",fixed:"right"}
					    ] ]
					  });
					  //查询
					  $("#doSearch").click(function(){
						  var params=$("#searchFrm").serialize();
						  tableIns.reload({url: '/dept/loadAllDept?'+params});
					  });
					  table.on('toolbar(deptList)', function(obj){
						  var data = obj.data; //获得当前行数据
						    switch(obj.event){
						      case 'add':
						    	  toAdd();
						      break;
						    };
						  });
					  
					  function toUpdate(data){
							url="/dept/updateDept";
							index=layer.open({
								type:1,//弹出层的类型
								title:'修改用户',
								content:$("#addAndUpdateDept"),  //type=1时使用
								skin:'layui-layer-molv',//设置皮肤
								area: ['500px', '300px'],//设置宽高
								shade:0.5,//设置遮罩的透明度
								shadeClose:true,//设置点击遮罩是否关闭弹出层
								maxmin:true, //是否显示最大化和最小化的按钮  该参数值对type:1和type:2有效
								success:function(){
									form.val("dataFrm",data);
									$('[name=available]').each(function(i,item){
										if($(item).val()==data.available){
											$(item).prop('checked',true);
											layui.use('form',function(){
												
												form.render();
											});
										}
									});
									$('[name=parent]').each(function(i,item){
										if($(item).val()==data.parent){
											$(item).prop('checked',true);
											layui.use('form',function(){
												
												form.render();
											});
										}
									});
									
									$('[name=open]').each(function(i,item){
										if($(item).val()==data.open){
											$(item).prop('checked',true);
											layui.use('form',function(){
												
												form.render();
											});
										}
									});
									form.render("radio");
									form.render();
									selectDeptPid(data.pid);
									
								}
							})
						}
					  function toAdd(){
						  url="/dept/addDept";
							index=layer.open({
								type:1,//弹出层的类型
								title:'添加用户',
								content:$("#addAndUpdateDept"),  //type=1时使用
								skin:'layui-layer-molv',//设置皮肤
								area: ['500px', '300px'],//设置宽高
								shade:0.5,//设置遮罩的透明度
								shadeClose:true,//设置点击遮罩是否关闭弹出层
								maxmin:true, //是否显示最大化和最小化的按钮  该参数值对type:1和type:2有效
								success:function(){
									$("#dataFrm")[0].reset();
									form.val("dataFrm",{open:"0",parent:"0",available:"1"});
									//得到排序码的最大值
									$.get("/dept/loadMaxOrderNumber",function(obj){
										$("#ordernum").val(obj.value);
									})
								}
						})
					}
					 var url;//提交的url
					var index;
					//监听行工具栏的事件
					  table.on('tool(deptList)', function(obj){
						  var data = obj.data; //获得当前行数据
						    switch(obj.event){
						      case 'delete':
						    	  deleteDept(data);
						      break;
						      
						      case 'update':
						    	  toUpdate(data);
						    	 
						    	  break;
						    };
						  });
					
					
					  form.on("submit(doSubmit)",function(obj){
							
							$.post(url,obj.field,function(result){
								if(result.code>0){
									layer.msg(result.msg);
								}
								tableIns.reload();
								layer.close(index);
								reloadLeftTree();
							})
							return false;//禁用同步提交方式
						});
					
					  //删除
					  function deleteDept(data){
							 $.post("/dept/isThisDeptObjHasChildren",{id:data.id},function(obj){
								 if(obj.value==false){
									 layer.confirm('确定删除【'+data.name+'】这个部门吗？',{icon:3, title:'提示信息'},function(index){
						                 $.post("/dept/deleteDept",{
						                     id : data.id  //将需要删除的id作为参数传入
						                 },function(data){
						                	tableIns.reload();
						                	layer.msg(data.msg);
						                    layer.close(index);
						                    reloadLeftTree();//刷新左边的树
						                 })
						            });
								 }else{
									 layer.msg("当前部门有子节点，请先删除子节点")
								 }
							 })
						}
					  
					  
				});
		//刷新表格
		function reloadTable(id){
			 tableIns.reload({url: '/dept/loadAllDept?id='+id});
		}
		//初始化树
		function initDeptTree(){
			$.post("/dept/loadDeptManagerLeftTreeJson",function(zNodes){
				 	initSelectTree("pid",zNodes,false);
			        $(".layui-nav-item a").bind("click", function () {
			            if (!$(this).parent().hasClass("layui-nav-itemed") && !$(this).parent().parent().hasClass("layui-nav-child")) {
			                $(".layui-nav-tree").find(".layui-nav-itemed").removeClass("layui-nav-itemed")
			            }
			        });
			})
		}
		initDeptTree();
		
		function reloadLeftTree(){
			window.parent.left.initDeptTree();
		}
		
		function selectDeptPid(pid){
			//找到zTree对象
			var treeObj = $.fn.zTree.getZTreeObj("pidTree");
			//根据pid的值找到zTree对象的节点对象
			var node = treeObj.getNodeByParam("id", pid, null);
			//选中
			treeObj.selectNode(node);
			//重新渲染zTree
			onClick(event,"pidTree");
		}
	</script>
</body>
</html>